@import "function";
@import url(reset.css);
@import url(font.css);
@import url(typo.css);
@import "compass/css3/border-radius";

body{ background:url(../images/imgBackground.png) repeat-x; background-color:#ee1e25;}
.max-container{  }
.container{ width:1125px; margin:0px auto; position:relative;  height:auto !important; }
.clear{ clear:both; }
.no_border{ border:none !important;}
.no_border_right{ border-right:none !important;}
.no_margin_right{ margin-right:0px !important;}
.no_margin_left{ margin-left:0px !important;}
.no_padding_left{ padding-left:0px !important;}
.no_padding_right{ padding-right:0px !important;}
.no_background{background:none !important;}
.float_right{ float:right !important;}
.float_left{ float:left !important;}
.bold{ font-weight:bold !important; }
.textInput{ display:block; }
.hide{ display:none !important; }
.updnWatermark{ font-size:12px; color:#292929; left:260px !important; }
/* USING FOR SITE WITHOUT SLIDE IMAGE*/
.no_slideImage{ /*padding-top:120px;*/ top:-18px; }
.odd{ background-color:#eeeeee !important;}
.even{}

.txtInput_toggle{}

.clear-fix:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
        }
* html .clear-fix             { zoom: 1; } /* IE6 */
*:first-child+html .clear-fix { zoom: 1; } /* IE7 */


/***************** SETTING WIDTH FOR HEADER - CONTENT - FOOTER  ********************/
.header,
.content,
.footer{width:1105px;margin:0px auto; padding:0px 10px;}
/***************** HEADING SETTING ********************/
.heading{
	display:block;
	border-bottom:1px solid #b7b7b7;
	padding-bottom:7px;
	margin-bottom:10px;
	h2{ display:block; color:#ed2327; text-transform:uppercase; font-weight:bold; font-size:14px;}
}
/***************** HEADER ********************/
.header{ 
	position:relative;
	background:url(../images/imgHeader-right.png) 820px 0px no-repeat;
	z-index:1;
	height:141px;
	.logo{ 
		float:left;
		display:block;
		margin-top:37px;
		z-index:2;
		h2{ 
			display:block; width:180px; height:93px;
			a{ display:block; text-indent:-9999px; width:180px; height:93px; background:url(../images/imgLogo.png) no-repeat;}
		}
	}
	.header-info{ 
		position:absolute; display:block; right:37px; top:25px;
		h3{ font-weight:bold; font-size:13px;}
		p{ margin-bottom:5px; font-size:12px;}
		z-index:2;
	}
	.header-search{
		float:right;
		margin-top:112px;
		margin-right:29px;
		position:relative;
		z-index:100;
		a#header-search-group{
			display:block;
			text-align:center;
			@include bg('btnSelectedOption.png');
			width:132px;
			height:27px;
			line-height:27px;
			color:#FFF;
			margin-right:10px;
			float:left;			
		}
		#header-search-group-wrapper{
			border:1px solid #cecece;
			background:#f5f5f5;
			@include border-radius(5px);
			display:none;
			position:absolute;
			top:32px;
			left:2px;
			z-index:1000;
			ul{
				margin:0;
				padding:0;
				li{
					display:block;
					overflow:hidden;
					a{
						text-decoration:none;
						display:block;
						padding:2px 0;							
						margin:0 15px;
						color:#323232;
						font-size:11px;
						&:hover{ color:#ef383c;}
					}
				}
			}
		}
		input{
			border:none;
			float:left;
			padding:0 9px;
			background:url(../images/imgButton.png) 0px -136px no-repeat; 
			width:255px; height:29px; line-height:29px; color:#707070;
			@include font-1;
			}	
		#header-search-1{ margin-right:10px;}
		#header-search-2{}		
	}
}
.content{
	background:url(../images/top-bg.png) center 0px no-repeat;
	position:relative;
	display:block;
	//overflow:hidden;
	
}

.navigation{
	display:block;
	background:url(../images/imgNav-shadow.png) center 75px no-repeat;
	padding:0px 35px;
	height:112px;
	ul{ 
		margin:0; padding:0;
		li{
			float:left;
			width:182px;
			height:59px;			
			margin:37px 20px 0 0;
			a{
				display:block;
				width:182px;
				height:59px;
				text-align:center;
				overflow:hidden;
				background:url(../images/imgButton.png) -232px -174px no-repeat;
				&:hover{ background-position:-232px -235px;}
				span{ color:#767678; display:block;}
				&.activeNav{ background-position:-1px -235px; 
					span{ color:#000;}
				}
				
				span.nav-upper{ text-transform:uppercase; font-size:16px; height:18px; margin-top:5px;}
				span.nav-lower{ font-size:12px; margin-top:4px;}
			}
		}
	}
	#nav-shopcart{
		display:block;
		float:left;
		@include imgButton(0px,-174px);
		width:220px;
		height:49px;
		margin-top:37px;
		#nav-sc-l{ 
			float:left; width:139px; height:38px;
			padding:10px 5px 0 6px;
			p{ margin-bottom:5px; color:#FFF;}}
		#nav-sc-r{
			float:left;
			background:url(../images/imgBasket.png) no-repeat;
			width:67px;
			margin-top:4px;
			height:45px;
			text-indent:-9999px;
		}
	}
}
/***************** MAIN CONTENT ********************/
.main-content{ 
	display:block; background:white;
	padding:31px 35px 110px 35px;
	.content-left{ float:left; width:212px; overflow:hidden; min-height:10px;}
	.content-right{ float:left; width:785px; overflow:hidden; margin-left:35px;}
	.content-full{ width:1000px; margin:0 auto; overflow:hidden;;}
	h2{ font-size:16px; font-weight:bold;}
}

/***************** INTRO PAGE ********************/
#intro-page{
	text-align:center;
	#intro-text{ width:710px; margin:0 auto; min-height:300px;}
	h2{
		font-weight:bold;
		font-size:22px;
		color:#000;
		span{
			color:#ea202e;			
		}
	}
	p{
		margin:0;
		font-size:13px;
		margin:20px 0;
	}
	#intro-button{
		margin:0 auto;
		width:460px;
		a#intro-offer{
			display:block;
			float:left;
			text-indent:-9999px;
			width:219px;
			height:69px;
			margin-right:10px;
			@include bg('imgButton-6.png');
			&:hover{ background-position:0 -105px;}
		}
		a#intro-history{
			display:block;
			float:left;
			text-indent:-9999px;
			width:219px;
			height:69px;
			margin-left:10px;
			@include bg('imgButton-6.png',-237px,0);
			&:hover{ background-position:-237px -105px;}
		}
	}
	#intro-category{
		display:block;
		min-height:45px;
		margin-top:60px;
		ul{
			display:block;
			margin:0;
			padding:0;
			li{
				float:left;
								
				height:40px;
				width:130px;
				margin-right:10px;
				a{
					display:block;
					line-height:40px;
					text-align:center;
					color:#FFF;
					font-size:15px;
					background:#ef383c;
					font-weight:bold;					
					@include border-radius(5px);
					&:hover{  }
				}
			}
		}
	}
}

/***************** ORDER PAGE ********************/
#orderpage{}
#order-list-1{
	display:block;
	overflow:hidden;
	background:url(../images/imgDot.png) center bottom no-repeat;
	padding-bottom:10px;
	ul{
		margin:0;
		padding:0;
		li{
			display:block;
			margin-bottom:5px;
			a{
				color:#FFF;
				font-size:13px;
				display:block;
				width:202px;
				padding-left:10px;
				height:27px;
				line-height:27px;
				@include imgButton();
				&#order-list-1-1{ background-position:0 0;}
				&#order-list-1-2{ background-position:0 -32px;}
			}
		}
	}
}

#order-list-2{
	display:block;
	overflow:hidden;
	margin-top:5px;
	ul.main-order-list{
		margin:0;
		padding:0;
		& > li{
			display:block;
			margin-bottom:5px;
			& > a{
				color:#FFF;
				font-size:13px;
				display:block;
				width:202px;
				padding-left:10px;
				height:27px;
				line-height:27px;
				@include imgButton(0,-68px);
				&.activeCate, &:hover{ @include imgButton(0,-100px); }
			}
		}
		.sub-list-order-2{			
			margin:0 0 0 10px;
			padding:0;
			display:none;
			li{
				display:block;				
				min-height:18px;				
				a{
					height:27px;
					line-height:27px;
					color:#000;
					font-size:12px;
					display:block;
					padding-left:10px;
					@include bg('imgArrow-2.png',0,-21px);
					&:hover, &.activeSubcate-2{ background-position:0 9px; color:#ea202e;}
				}
				&.frozen-ico{ @include bg('imgFrozen.png',right,center); }
			}
		}
		
	}
}

#non-food{
	display:block;
	width:202px;
	padding:8px 0 0 10px;
	height:110px;
	@include imgButton(-224px,0px);
	color:#FFF;
	p{ color:#FFF; font-size:13px; margin-bottom:5px;}
	ul{
		margin:0;
		padding:0;
		li{
			line-height:15px;
			a{
				color:#FFF;
				font-size:11px;
			}
		}
	}
}

#stroke-week{
	display:block;
	@include imgButton(0,-301px); 
	width:212px; height:37px; line-height:37px;	
	color:#FFF;
	text-align:center;
	font-size:13px;
	text-transform:uppercase;
	margin-top:5px;
}

/***************** TABLE setting ********************/
.table{
	padding:10px 0;

	.table-caption{ 
		background:#edecf0; border:1px solid #a0a0a0; height:20px; line-height:20px;
		@include border-radius(10px);
		font-size:11px;
	}
	.table-each-category{
		display:block;
	}
	.table-category{		
		border:1px solid #a0a0a0; height:20px; line-height:20px;			
		margin:5px 0px;
		@include border-radius(10px);
		@include bg('imgArrow-1.png',7px,-11px);
		background-color:#bdddf8;
		font-size:11px;
		&.table-category-active{ background-position:7px 8px; }
	}
	.table-row{ 
		height:32px; line-height:32px; border-bottom:1px solid #b7b7b7;
		background:#FFF;
		
	}
	.table-history-caption{
		background:#edecf0; border:1px solid #a0a0a0; height:20px; line-height:20px;
		@include border-radius(10px);
		font-size:11px;
				
	}
	.sold-out{ color:#9c9c9c;}
	.table-col{ float:left; cursor: default;}
	.table-col-1{ 
		margin-left:5px; width:75px;
		p{ margin:0; float:left; line-height:32px;}
		a.info-ico{ margin:8px 3px 0 0; display:block; float:left; text-indent:-9999px; @include imgButton(-447px,-100px); width:16px; height:17px;}
	}
	
	.table-col-2{ 
		width:175px;
		p{ margin:0; float:left; line-height:32px;}
		a.info-clock{ float:left; display:block; margin:5px 0 0 5px; width:18px; height:19px; text-indent:-9999px; @include imgButton(-444px,-301px); }
	}
		
	.table-col-3{ 
		width:190px;
		margin-right:15px;
		p{float:left; margin:8px 0 0 0;}
		div.col-3-setting{ float:right;}
		a{ cursor:default; float:left; width:18px; height:18px; text-indent:-9999px; margin-top:8px; margin-right:5px;}
		a.setting-1{ @include imgButton(-447px,-158px); }
		a.setting-2{ @include imgButton(-470px,-158px); }
		a.setting-3{ @include imgButton(-447px,-179px); }
		a.setting-4{ @include imgButton(-470px,-179px); width:20px; height:14px; margin-top:10px;}
		a.setting-5{ @include imgButton(-447px,-203px); }
		a.setting-6{ @include imgButton(-470px,-203px); }
	}
	 
	.table-col-4{ width:75px;}
	.table-col-5{ width:70px; text-align:center;}
	.table-col-6{ width:90px; text-align:center;}
	.table-col-7{ width:75px;
		input.table-quantity{ 
			border:1px solid #a0a0a0; float:left; width:30px; padding:0px 2px; 
			text-align:center; height:17px; line-height:17px;
			@include border-radius(5px);
			@include font-1;
			font-size:11px;
			margin-top:7px;
		}
		input.table-checkbox{
			margin-top:7px;
		}
		a{ display:block; float:left; width:23px; height:19px; text-indent:-9999px; margin:7px 0 0 5px;}
		a.table-order{ @include imgButton(-443px,-51px); }				
	}
	
	.table-col-8{
		width:140px;
		margin-left:17px;
	}
	.table-col-9{ width:250px;}
	.table-col-10{ width:250px;}
	.table-col-11{ width:115px; text-align:right;}
	
	/*** SOLDOUT & ADDED ROW*****/
	.sold-out .table-col-1 a.info-ico{ background-position:-468px -100px;}
	.sold-out .table-col-2 a{ color:#9C9C9C;}
	.sold-out .table-col-2 a.info-clock{ background-position:-470px -302px;}
	.sold-out .table-col-3 a.setting-1{ background-position:-447px -226px;}
	.sold-out .table-col-3 a.setting-2{ background-position:-470px -226px;}
	.sold-out .table-col-3 a.setting-3{ background-position:-448px -247px;}
	.sold-out .table-col-3 a.setting-4{ background-position:-470px -247px;}
	.sold-out .table-col-3 a.setting-5{ background-position:-447px -271px;}
	.sold-out .table-col-3 a.setting-6{ background-position:-470px -271px;}
	.sold-out .table-col-7 a.table-order{ @include imgButton(-472px,-26px); }
	
	
	.item-added .table-col-7 a.table-order{ @include imgButton(-443px,-26px);}
}
.table-category-content{ display:none;}
.bottom-body{
	background:url(../images/bottom-bg.png) no-repeat;
	width:1125px;
	height:32px;
	padding:0px 10px;
	margin-bottom:15px;
}
a#btnReorder{ 
	display:block;
	text-indent:-9999px;
	@include bg('imgReorder.png');
	width:100px;
	height:23px;
	float:right;
	margin-bottom:5px;
}
/***************** REVEAL MODAL ********************/
.prdDetail-div{
	display:block;
	width:700px;
	top:-50px !important;
	left:42% !important;
	z-index:9999;
	.prdDetail-info{
		overflow:hidden;
	}
	.prdDetail-image{ 
		float:left;
		img{ 			
			@include border-radius(10px);
			width:200px;
			height:185px;
		}
	}
	.prdDetail-text{
		display:block;
		float:left;
		width:480px;
		margin-left:20px;
		h2{
			font-weight:bold;
			margin-bottom:5px;
			color:#000;
		}
		
		p{
			margin-bottom:2px;
			font-size:12px;
			color:#000;			
		}
	}
	table{	
		tr{ border-bottom:1px solid #cccccc;}
		tr.border-red{ border-bottom:1px solid #f22b2c; }	
		th,td{ padding:1px; text-align:center; voice-family: center;}
		th{ background:#f22b2c; text-align:left; color:#FFF; padding:5px;}
		td{ line-height:16px;}
		td.td-left{ text-align:left;}
	}
	.prdDetail-description{
		margin-top:10px;
		h1{ font-size:15px; color:#000;}
		p{ color:#000;}
	}
}

/***************** FOOTER setting ********************/
.footer{
	width:1085px;
	display:block;
	border-top:1px solid #d1d1d1;
	background:#FFF;
	position:relative;	
	margin:0 10px;
	p{ color:#999999; text-align:center; font-size:10px; margin:0; margin-top:10px;}
	a{ color:#999999; &:hover{ text-decoration:underline;}}
	img#imgCafe{ position:absolute; width:180px; height:158px; right:20px; bottom:-25px;} 
}
/***************** SHOPCART setting ********************/
.shopcart-list{ width:220px; position:absolute; top:90px; right:52px; background:#f5f5f5; border:1px solid #cecece; @include border-radius(5px); padding:10px 0; display:none;}
.eachCart{
	display:block;
	position:relative;
	margin:10px 0 10px 5px;
	padding-bottom:5px;
	@include bg('imgBorder-2.png',center,bottom);
	p.eachCart-name{ display:block;}
	a.eachClose{ display:block; position:absolute; text-indent:-9999px; @include bg('imgButton-4.png'); width:10px; height:10px; right:0px; top:0px; &:hover{ background-position:0 -10px;}}
	.eachCart-box{
		.eachCart-value{ float:left;}
		.eachCart-quantity{ float:right;
			a.btnDown{ margin-top:2px; text-indent:-9999px; float:left; display:block; @include bg('imgButton-3.png'); width:15px; height:15px; &:hover{ background-position:-15px 0px;}}
			a.btnUp{ margin-top:2px; text-indent:-9999px; float:left; display:block; @include bg('imgButton-3.png',0,-15px); width:15px; height:15px; &:hover{ background-position:-15px -15px; }}
			input.inputSoluong{ float:left; text-align:center; border:1px solid #a0a0a0; @include border-radius(5px); width:25px; font-size:11px; margin:0 5px;}
		}
	}
}
.shopcart-setting{
	display:block;
	margin:10px 0 5px 0;
	textarea{ border:1px solid #a5a5a5; @include border-radius(5px); float:left; width:189px; padding:5px; height:100px; font-size:12px; @include font-1; margin-left:10px; margin-bottom:8px; resize:none; overflow:auto;}
	#btnShopcart-close{ float:left; margin-left:10px; margin-right:10px; display:block; text-indent:-9999px; width:70px; height:23px; @include bg('imgButton-5.png',-122px,0); &:hover{ background-position:-122px -27px;}}
	#btnCheckout{ float:left; display:block; text-indent:-9999px; width:110px; height:23px; @include bg('imgButton-5.png',0,0); &:hover{ background-position:0 -27px;}}
}
/***************** subCategory setting ********************/
.subCategory{
	display:block;
	border-bottom:1px solid #b7b7b7;
	padding-bottom:10px;
	margin-bottom:10px;
	h1{ font-weight:bold; font-size:16px;}
	ul{
		margin:0;
		padding:0;
		li{
			float:left;
			width:150px;
			height:20px;
			text-align:center;
			background:#dcdcdc;
			border:1px solid #b4b4b4;
			margin-right:5px;
			margin-bottom:10px;
			@include border-radius(7px);
			a{
				display:block;
				line-height:20px;
				color:#323232;
				&:hover, &.activeSubcate{ color:#ef383c;}
			}
		}
		
	}
	ul.list-category{		
		li{
			height:35px;
			font-weight:bold;			
			a{
				line-height:35px;				
				font-size:12px;
			}
		}
	}
	p.eachCate-p{ font-size:13px;}
}

/***************** OVERVIEW PAGE ********************/
.overview-div{
	display:block;
	.eachOverview{
		@include bg('imgDownload-1.png');
		float:left;
		width:247px;
		margin:0 14px 15px 0;	
		height:174px;
		p{ color:#323232; font-size:13px; margin-left:11px;	margin-bottom:4px;}
		p.eachOv-1{ margin-top:9px; }
		p.eachOv-2{ }
		a{ display:block; text-indent:-9999px; margin-left:8px;} 
		a.eachOv-view{ @include bg('imgViewPDF.png'); width:115px; height:20px; margin-left:12px; margin-bottom:13px;}
		a.eachOv-pdf{ @include bg('btnDownload.png',0,0); width:231px; height:38px; 
			&:hover{ background-position:0 -57px;}}
		a.eachOv-mail{ @include bg('btnDownload.png',-241px,0); width:231px; height:38px; margin-top:5px;
			&:hover{ background-position:-241px -57px;}}
		
	}
}

/***************** OVERVIEW REVEAL MODAL PAGE ********************/
.overview-modal-div{ width:780px; top:-120px !important; left:38% !important;}

/***************** Heading setting ********************/
@import "form";